<template>
    <el-menu background-color="#304156" text-color="#cccccc"
             ref="menu" :default-active="activeIndex" class="sidebar" :unique-opened="true"
             :default-openeds="['1']">
        <!--<el-menu-item class="index-menu-item" index="/" @click="urlClick('/')"><i-->
        <!--class="iconfont menu_home menu_title"></i>首页-->
        <!--</el-menu-item>-->
        <template v-for="(item,index) in list">
            <el-submenu v-if="item.subMenus.length>0" :index="item.id">
                <template slot="title"><i class="iconfont menu_title" :class="'menu_' + item.css"></i>{{ item.name }}
                </template>
                <template v-for="(_item,_index) in item.subMenus">
                    <el-menu-item :index="_item.url" @click="urlClick(_item.url)">
                        <i class="iconfont" :class="'menu_' +_item.css"></i>
                        {{ _item.name }}
                    </el-menu-item>
                </template>
            </el-submenu>

            <el-menu-item v-else class="index-menu-item" :index="item.url"
                          @click="urlClick(item.url)"><i class="iconfont menu_title"
                                                         :class="'menu_' + item.css"></i>{{ item.name }}
            </el-menu-item>

        </template>
    </el-menu>
</template>
<script>
    export default {
        props: {
            menus: {
                type: Array, default() {
                    return [];
                }
            }
        },
        data() {
            return {activeIndex: "/", list: []};
        },
        watch: {
            menus: {
                immediate: true,
                handler(value) {
                    this.list = value;
                }
            }
        },
        mounted() {
//      window._vue_menu = this;
//       jv.await(200, 10, () => {
//         if (Object.keys(this.$refs.menu.items).length > 1) {
//           setTimeout(() => {
//             this.setChecked.call(this);
//           }, 300);
//           return false;
//         }
//       });
            //window.addEventListener("hashchange", hashChang);
        },
        // computed: {
        //   list() {
        //     return this.menus.map(it=>it);
        //   }
        // },
        methods: {
            setChecked(url) {
                url = url || location.hash.slice(1).split("?")[0];

                if (url == "/") {
                    this.activeIndex = "/";
                    return;
                }

                var vueItem = this.$refs.menu.items[url];
                if (!vueItem) {
                    url = url.split('/').slice(0, -1).join('/');
                    if (url) {
                        this.setChecked(url);
                    }
                    return;
                }

                this.activeIndex = url;
            },
            urlClick(url) {
                this.$router.push(url);
            }
        }
    }

</script>
<style>
    html .sidebar {
        width: 160px;
        z-index: 999;
        overflow: auto;
        user-select: none;
        background-color: #f7f7f7;
        color: #333;
    }

    html .el-menu-item, html .el-submenu__title {
        color: #333;
    }

    html .index-menu-item {
        height: 56px;
        line-height: 56px;
        font-size: 14px;
        color: #333;
        background: #f7f7f7;
        padding: 0 20px;
        cursor: pointer;
        position: relative;
        transition: border-color .3s, background-color .3s, color .3s;
        box-sizing: border-box;
        white-space: nowrap;
    }

    html .el-submenu__title:hover {
        background-color: #fff;
    }

    .index-menu-item:hover {
        background: #fff;
    }

    html .el-menu-item.is-active, html .el-menu-item.is-active .iconfont {
        background: #fff;
        color: #fead04;
    }

    html .el-menu {
        background-color: #f7f7f7;
    }

    html .el-submenu .el-menu-item:hover {
        background-color: #fff;
    }

    html .el-submenu .el-menu-item {
        background-color: #fff;
    }

    html .iconfont {
        color: #999;
    }
</style>
